<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="../templates/noLeftPanelTemplate.xhtml"> <!-- REF TO UI TEMPLATE -->

	<ui:define name="content">
	 
	 <p:growl id="growl" life="1000" showDetail="true" />    
	 <!-- Products -->
		<div class="products">
		
		 
			
		
		<div class="cl"></div>
			<ul>
		    <li>      
		          <a href="#"><img src="#{request.contextPath}/#{shop.lastVisitedItem.detailImage}" alt=""/></a>
		          
		 	</li>
		 	<li>      
			
		
		          <h:form id="detailForm"> 
		            
		              
		            
		            
		            <div >PRODUCT DETAILS </div>
		            
		            
		            
		            <div class="product-info">
		              
		              <div class="product-desc">
		                <h4>#{shop.lastVisitedItem.gender}</h4>
		                <p>#{shop.lastVisitedItem.description}</p>
		                <strong class="price">#{shop.lastVisitedItem.price} <span>€</span></strong>  
						<h2>#{shop.lastVisitedItem.brand}</h2>
		              	
		              </div>
		            </div>
		            
		            <script>
								
		            			var tempGlobalSelectedColor; //Workaround for setting css on color box when ajax completes
		            
								function selectColor(eventSource)
								{
									remoteCommand({param1: eventSource.id}); //the name of p:remoteCommand
									
									tempGlobalSelectedColor = eventSource.id;
									
									
									
								}
								
								function toggleColorClass(source)
								{
									$("#\\" + tempGlobalSelectedColor).removeClass("item-color-box");
									$("#\\" + tempGlobalSelectedColor).addClass("item-color-box-selected");
																		
									
									
								}
							</script>
		            
		            <p:remoteCommand name="remoteCommand" update="colorPanel" async="false" oncomplete="toggleColorClass(this)" >  
        							<f:setPropertyActionListener value=""   
            							target="#{itemDetailController.selectedColor}" /><!-- attribute value is leaved empty -->
            							
    				</p:remoteCommand>
    				
    				<!-- 
    				 <p:remoteCommand name="updateAddButton" action="#{itemDetailController.disabledButtonAdd}" 
    				 							update="addToCartButton" async="false">  
        							<f:setPropertyActionListener value=""   
            							target="#{itemDetailController.disabledButtonAdd}" />
    				</p:remoteCommand>
    				 -->
		            
		            <h:panelGroup id="colorPanel" style="margin-top: 20px">
			            	
			            	<c:forEach items="#{itemDetailController.distinctHexColorSet}" var="itemHexColor" varStatus="rowCounter">
				               <div  id="#{itemHexColor}" onclick="selectColor(this)" class="item-color-box" style="background-color: #{itemHexColor}"></div>
			            	</c:forEach>
		            
		            <br></br>
		            
		            <div style="margin-top: 20px">
			            
			            
			            <p:selectOneMenu value="#{itemDetailController.selectedSize}" disabled="#{itemDetailController.selectedColor == null}">  
            				<f:selectItem itemLabel="Selezionare una taglia" itemValue="" />  
            				<f:selectItems value="#{itemDetailController.availableSizeForThisColor}" />  
        					<p:ajax update="addToCartButton"/>
        				</p:selectOneMenu>  
			            
			            <!-- 
			           	<p:selectOneMenu value="#{itemDetailController.selectedSize}" style="width: 100px" >  
				            <f:selectItem itemLabel="" itemValue="" /> 
				            
				            <c:forEach items="#{itemDetailController.availableSizeForThisColor}" var="itemSize" varStatus="rowCounter">
			               			<f:selectItem itemLabel="#{itemSize}" itemValue="#{itemSize}" /> 	
				            </c:forEach>
			            	<p:ajax update="addToCartButton"/> 
			            </p:selectOneMenu>
			             -->  
		            </div>
		            
		            <br></br>
		            <br></br>
		            
		            
		            
		            </h:panelGroup>
		            
		             <p:commandButton 	id="addToCartButton" actionListener="#{itemDetailController.updateItemStock}" disabled="#{itemDetailController.disabledButtonAdd}"  
		             					value="Aggiungi alla shopping bag" update=":cartDiv, :growl, detailForm, colorPanel"> <!-- Update panel with cart info -->
		             	<f:setPropertyActionListener target="#{shop.itemInsideCart}" value="#{shop.lastVisitedItem}"/> 
		             </p:commandButton> 
		            
		            
		             <!--  
		             	<f:setPropertyActionListener target="#{itemDetailController.selectedColor}" value="null"/>
		             	<f:setPropertyActionListener target="#{itemDetailController.selectedSize}" value="null"/>
		             <h:commandButton id="addToCartButton" value="ADD TO CART" >
		             	<f:setPropertyActionListener target="#{shop.itemInsideCart}" value="#{shop.lastVisitedItem}"/> 
		             	<f:ajax  render=":cartDiv"/>
		             </h:commandButton>
		             -->
		             
		             
		               
		            </h:form>
		 	</li>
		 
		 
		 
		 </ul>
		 <div class="cl"></div>
		</div>			
	
	 

		</ui:define>
</ui:composition>								<!-- Content -->
